<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<u-card @click="navTo('/pages/sys/workbench/processMaterialDetails',item)" class="task-list-item" :border="false" padding="20" margin="20rpx" v-for="(item,index) in detailList" :key="index">
			<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
				<view style="display: flex;align-items: center;font-size: 30rpx;">{{item.orderCode || ''}}</view>
			</view>
			<view class="" slot="body">
				<u-row gutter="16">
					<u-col span="12">
					<!-- 	<view class="apply-text"><span>项目号：</span>100001001</view>
						<view class="apply-text"><span>客户名称：</span>张三</view>
						<view class="apply-text"><span>地址：</span>那是一条神奇的天路</view>
						<view class="apply-text"><span>业主电话：</span>13331587963</view> -->
						
							<view class="apply-text" v-for="(child,idx) in columns" :key="idx">
								<span>{{child.title}}：</span>{{item[child.dataIndex] || ''}}
							</view>
					</u-col>
				</u-row>
<!-- 				<u-time-line style="padding-top: 30rpx;">
					<u-time-line-item v-for="(item,index) in list" :key="item.id" style="padding-top: 10rpx;">
						<template v-slot:node>
							<view v-if="item.status == '1'" class="u-node" style="background: #19be6b;">
	
								<u-icon name="checkbox-mark" color="#fff" :size="24"></u-icon>
							</view>
							<view v-else-if="item.status == '0'" class="u-node" style="background: #ffff00;">

								<u-icon name="pause" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{item.name}} </view>
								<view class="u-order-time">开始时间:{{item.endTime}} </view>
								<view class="u-order-time">结束时间:{{item.endTime}} </view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line> -->
				
			</view>
			
		</u-card>
<!-- 		<u-row gutter="32" class="bottom-box" justify="center">
			<u-col span="12">
				<view><u-button type="primary" shape="circle" @click="submit()">确定</u-button></view>
			</u-col>
		</u-row> -->
	</view>
</template>

<script>
	import {stringify} from '@/common/common';
	export default {
		data() {
			return {
				show: false,
				queryParam: {},
				list:[],
				fileList: [],
				text: null,
				detailList:[],
				columns: [
					{
						title: '产品编号',
						dataIndex: 'productCode',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					{
						title: '品牌',
						dataIndex: 'brand',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					{
						title: '颜色',
						dataIndex: 'color',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					{
						title: '规格',
						dataIndex: 'spec',
						align: 'right',
						width: '12.8%'
					},
					{
						title: '型号',
						dataIndex: 'model',
						align: 'right',
						width: '12.8%'
					},
					{
						title: '地址',
						dataIndex: 'address',
						align: 'right',
						width: '12.8%'
					},
					{
						title: '区域',
						dataIndex: 'area',
						align: 'right',
						width: '12.8%'
					},
					{
						title: '数量',
						dataIndex: 'number',
						align: 'right',
						width: '12.8%'
					},
				],
			}
		},
		onLoad(options){
			this.queryParam.orderId = options.id
			this.getDetail()
		},
		methods: {
			submit(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面
				// prevPage.$vm.getList(); 
				uni.navigateBack()
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			getDetail(){
				let param ={
					productOrderId: this.queryParam.orderId
				}
				this.$u.api.getProductDetailList(param).then(res=>{
					this.detailList = res.data
				})
			},
			
			navTo(url,item) {
				item.productOrderId = this.queryParam.orderId
				let query = stringify(item)
				uni.navigateTo({
					url: `${url}?${query}` 
				});
			},
	
		}
		
	}
</script>

<style lang="scss" scoped>
@import 'index.scss';
page {
	background-color: #f5f5f5;
}
.wrap .search{
	background: #ffffff;
}
.apply-text{
	font-size: 28rpx;
	color: #333333;
	span{
		color: #999999;
	}
}
.user-images{
	width: 28px;
	height:28px;
	margin-right: 8px;
}
.apply-list-foot{
	font-size: 28rpx;
}
.personnel-list{
	display: flex;
	align-items: center;
	flex-wrap:wrap;
	.personnel-user{
		position: relative;
		margin: 5px 9px 0;
	}
	.user-images{
		width: 48px;
		height:48px;
		margin-right:0;
		
	}
	.iconfont{
		position: absolute;
		top:-12px;
		right:-5px;
		color: #FE0100;
	}
}
.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>